<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<style>
			#app th,td{
				text-align: center;
				width: 150px;
				line-height:20px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="app">
			ID:<input type="text" v-model="id" />
			NAME:<input type="text" v-model="name" @keyup.enter="add"/>
			<input type="button" @click="add" value="添加" />
			搜索：<input type="text" v-model="keywords" />
			<table  class="table table-bordered table-hover table-striped" cellpadding="0" border="1" cellspacing="0">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Ctime</th>
						<th>Operation</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in search(keywords)" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.ctime|dataFormat("")}}</td>
						<td><a href="" @click.prevent="del(item.id)">del</a></td>
					</tr>					
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			Vue.filter('dataFormat',function(dateStr,partten=""){
				var dt=new Date(dateStr)
				var y=dt.getFullYear()
				var m=dt.getMonth()+1
				var d=dt.getDate()
				
				if(partten.toLocaleLowerCase()==="yyyy-mm-dd")
				{
					return `${y}-${m}-${d}`
				}
				else{
					var hh=dt.getHours()
					var mm=dt.getMinutes()
					var ss=dt.getSeconds()
					return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
				}
			})			
			new Vue({
				el:"#app",
				data:{
					id:"",
					name:"",
					keywords:"",
					list:[
						{id:1,name:"宝马",ctime:new Date()},
						{id:2,name:"奔驰",ctime:new Date()}						
					]
				},
				methods:{
					add:function(){
						if(this.id!=""&&this.name!=""){
							var car={id:this.id,name:this.name,ctime:new Date()}
						 	this.list.push(car)
						 	this.id=this.name=""
						}
					},
					del:function(id){
//						this.list.some((item,i)=>{
//							if(item.id==id){
//								this.list.splice(i,1)
//								return true;								
//							}
//						})
						var index=this.list.findIndex(item=>{
							if(item.id==id){
								return true;
							}
						})
						this.list.splice(index,1)
					},
					search:function(keywords){
//						var newList=[]
//						this.list.forEach(item=>{
//							if(item.name.indexOf(keywords)!=-1)
//							{
//								newList.push(item)
//							}
//						})
//						return newList
						return this.list.filter(item=>{
							if(item.name.includes(keywords)){
								return item
							}
						})
					}
				}
			})
		</script>
	</body>
</html>
